<template>
    <p>混合式API写法</p>
    <p>ref</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>

    <p>----------------reactive----------------</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>
    <p>obj[0]:{{ obj[0] }}</p>
    <p>obj[1]:{{ obj[1] }}</p>
    <p>----------------computed----------------</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>objAgeAddFive:{{ objAgeAddFive }}</p>


    <p>----------------methods----------------</p>
    <button @click="countAddOne">count + 1</button>
    <button @click="countAddTwo">count + 2</button>
    <button @click="updateObj">更新obj</button>

    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age"/>
</template>

<script setup>
import { ref,reactive,computed,watch } from 'vue'
import Son from './Son.vue'
const count = ref(0)
const test = ref('hello world')
const arr = reactive([1,2,3,4])
//reactive
const obj = reactive({
    name:'tom',
    age:12
})

//computed
const countAddFive = computed(() =>{
    return count.value + 5
})

const objAgeAddFive = computed(() =>{
    return obj.age + 5
})

//methods
function countAddOne() {
    count.value++
}
const countAddTwo =() => {
    count.value += 2
}

const updateObj = () =>{
    updateObjName()
}

const updateObjName =() => {
    obj.name = ' jerry '
}

//watch
watch(count,(newVal, oldVal) =>{
    console.log('count改变了');
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})

watch(countAddFive,(newVal, oldVal) =>{
    console.log('countAddFive改变了');
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})

watch(obj,(newVal, oldVal) =>{
    console.log('obj改变了');
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})

watch(() =>obj.name , (newVal, oldVal) =>{
    console.log('obj.name改变了');
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})

</script> 